

<script setup>
import { goodsDeleteApi, goodsInListApi, goodsOutListApi } from '@/apis/goods.js'
import GoodsList from '@/components/goods/GoodsList.vue'
import { ref } from 'vue'
import { onReachBottom, onShow, onLoad, onPageScroll } from "@dcloudio/uni-app"

const formData = ref({
  goodscode: "", // 物料编码
  goodsname: "", // 物料名称
  batchno: "", // 批次号
})

// 添加一个响应式变量控制搜索表单的显示和隐藏
const isFormVisible = ref(false)

// 设置滚动阈值，当滚动距离超过这个值时隐藏表单
const SCROLL_THRESHOLD = 50

const params = ref({
  pageNum: 1,
  pageSize: 10,
})
const goodsList = ref([])
let isFirstLoad = true
const loadStatus = ref({
  status: "loadmore",
  noMore: false,
  loading: false
})
const type = ref('in') // 默认类型为入库 in or out
onLoad(async (options) => {
  type.value = options.type
  uni.setNavigationBarTitle({ title: options.type === 'in' ? '入库货物' : '出库货物' })
  await getGoodsList()
  isFirstLoad = false
})

onShow(async () => {
  if (isFirstLoad) return
  init()
  getGoodsList()
})

onReachBottom(() => {
  if (!loadStatus.value.noMore) {
    getGoodsList()
  }
})
const init = () => {
  params.value.pageNum = 1
  params.value.goodscode = ""
  params.value.goodsname = ""
  params.value.batchno = ""
  loadStatus.value.noMore = false
  loadStatus.value.status = "loadmore"
  goodsList.value = []
}

const getGoodsList = async () => {
  try {
    const res = type.value === 'in' ? await goodsInListApi(params.value) : await goodsOutListApi(params.value)
    const { rows, total } = res
    if (params.value.pageNum === 1) {
      goodsList.value = rows
    } else {
      goodsList.value = [...goodsList.value, ...rows]
    }
    if (rows.length < params.value.pageSize || goodsList.value.length >= total) {
      loadStatus.value.noMore = true
      loadStatus.value.status = "nomore"
    } else {
      loadStatus.value.status = "loadmore"
    }
    params.value.pageNum++
  } catch {
    loadStatus.value.status = "loadmore"
  } finally {
    loadStatus.value.loading = false
  }

}

// 添加切换表单显示状态的方法
const toggleFormVisibility = () => {
  isFormVisible.value = !isFormVisible.value
}

const handlerSearch = async () => {
  const { goodscode, goodsname } = formData.value
  if (!goodscode && !goodsname) {
    return uni.$u.toast("请输入物料编码或物料名称")
  }
  init()
  params.value = {
    ...params.value,
    goodscode: goodscode,
    goodsname: goodsname,
  }
  await getGoodsList()
}
const handlerReset = async () => {
  formData.value = {
    goodscode: "",
    goodsname: "",
  }
  init()
  await getGoodsList()
}

// 页面滚动时触发
onPageScroll((e) => {
  // 当滚动距离大于阈值且表单当前是显示状态时，隐藏表单
  if (e.scrollTop > SCROLL_THRESHOLD && isFormVisible.value) {
    isFormVisible.value = false
  }
})

const handlerDelete = (item) => {
  uni.showModal({
    title: '温馨提示',
    content: `确定要删除${item.goodsname}的数据吗?`,
    success: async res => {
      if (!res.confirm) return
      await goodsDeleteApi(item.id)
      goodsList.value = goodsList.value.filter(i => i.id !== item.id)
    }
  })
}
const handlerEdit = (item) => {
  const url = type.value === 'in' ? '/pages/goods/inForm' : '/pages/goods/outForm'
  uni.navigateTo({
    url: `${url}?id=${item.id}`
  })
}
</script>

<template>
  <view class="page_container">
    <u-sticky>
      <view class="search_container mb flex_sb" @click="toggleFormVisibility">
        <text>搜索内容</text>
        <view>
          {{ isFormVisible ? '收起' : '展开' }}
          <u-icon :name="isFormVisible ? 'arrow-up' : 'arrow-down'" size="20"></u-icon>
        </view>
      </view>
      <view class="sticky-form-container" v-show="isFormVisible">
        <u-form :model="formData" label-width="200">
          <u-form-item label="物料编码:" v-if="type === 'out'">
            <u-input v-model="formData.goodscode" placeholder="请输入物料编码" class="search-input" />
          </u-form-item>
          <u-form-item label="物料名称:">
            <u-input v-model="formData.goodsname" placeholder="请输入物料名称" />
          </u-form-item>
          <u-form-item label="批次号:">
            <u-input v-model="formData.batchno" placeholder="请输入批次号" />
          </u-form-item>
          <u-form-item>
            <view style="display: flex;justify-content: space-around;">
              <u-button type="primary" size="medium" @click="handlerSearch">搜索</u-button>
              <u-button type="default" size="medium" @click="handlerReset">重置</u-button>
            </view>
          </u-form-item>
        </u-form>
      </view>
    </u-sticky>
    <GoodsList :goodsList="goodsList" :isGoodsPage="true" :loadmoreStatus="loadStatus.status" @clickDelete="handlerDelete"
      @clickEdit="handlerEdit" editText="详情" />
  </view>
</template>

<style lang="scss" scoped>
.form-container {
  padding: 20rpx;
  background: #fff;
  z-index: 99;
}

.search_container {
  height: 100rpx;
  padding: 0 20rpx;
  background: #fff;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.flex_sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

